<template>
  <view class="recipe-collections">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
      </view>
      <text class="page-title">{{ pageTitle }}</text>
      <view class="placeholder"></view>
    </view>

    <!-- 标签页切换 -->
    <view class="tabs-container">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'collections' }"
        @click="switchTab('collections')"
      >
        <text class="tab-text">收藏</text>
        <view class="tab-indicator" :class="{ active: activeTab === 'collections' }"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'likes' }"
        @click="switchTab('likes')"
      >
        <text class="tab-text">点赞</text>
        <view class="tab-indicator" :class="{ active: activeTab === 'likes' }"></view>
      </view>
    </view>

    <!-- 菜谱列表 -->
    <view class="recipe-list">
      <block v-if="activeTab === 'collections'">
        <view 
          v-for="(recipe, index) in collections" 
          :key="index"
          class="recipe-card"
          :style="{ animationDelay: index * 0.1 + 's' }"
          @click="viewRecipeDetail(recipe.id)"
        >
          <view class="recipe-image">
            <image :src="recipe.image" mode="aspectFill"></image>
            <view class="recipe-rating">
              <uni-icons type="star" size="16" color="#FFD700"></uni-icons>
              <text>{{ recipe.rating }}</text>
            </view>
          </view>
          <view class="recipe-info">
            <text class="recipe-title">{{ recipe.title }}</text>
            <text class="recipe-description">{{ recipe.description }}</text>
            <view class="recipe-meta">
              <view class="meta-item">
                <uni-icons type="time" size="14" color="#666"></uni-icons>
                <text>{{ recipe.time }} 分钟</text>
              </view>
              <view class="meta-item">
                <uni-icons type="person" size="14" color="#666"></uni-icons>
                <text>{{ recipe.creator }}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
      
      <block v-if="activeTab === 'likes'">
        <view 
          v-for="(recipe, index) in likes" 
          :key="index"
          class="recipe-card"
          :style="{ animationDelay: index * 0.1 + 's' }"
          @click="viewRecipeDetail(recipe.id)"
        >
          <view class="recipe-image">
            <image :src="recipe.image" mode="aspectFill"></image>
            <view class="recipe-rating">
              <uni-icons type="star" size="16" color="#FFD700"></uni-icons>
              <text>{{ recipe.rating }}</text>
            </view>
          </view>
          <view class="recipe-info">
            <text class="recipe-title">{{ recipe.title }}</text>
            <text class="recipe-description">{{ recipe.description }}</text>
            <view class="recipe-meta">
              <view class="meta-item">
                <uni-icons type="time" size="14" color="#666"></uni-icons>
                <text>{{ recipe.time }} 分钟</text>
              </view>
              <view class="meta-item">
                <uni-icons type="person" size="14" color="#666"></uni-icons>
                <text>{{ recipe.creator }}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
      
      <!-- 空状态 -->
      <view v-if="(collections.length === 0 && activeTab === 'collections') || (likes.length === 0 && activeTab === 'likes')" class="empty-state">
        <uni-icons type="none" size="64" color="#ccc"></uni-icons>
        <text class="empty-text">暂无{{ activeTab === 'collections' ? '收藏' : '点赞' }}的菜谱</text>
        <text class="empty-subtext">去发现页探索更多美食吧</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'collections',
      pageTitle: '我的菜谱',
      collections: [
        {
          id: 1,
          title: '香煎三文鱼配芦笋',
          description: '鲜嫩多汁的三文鱼搭配清爽芦笋，健康美味',
          image: 'https://images.unsplash.com/photo-1579871494447-9811cf80d66c',
          rating: 4.8,
          time: 25,
          creator: 'Chef John'
        },
        {
          id: 2,
          title: '意大利蘑菇烩饭',
          description: '经典意式烩饭，蘑菇香气浓郁，口感丰富',
          image: 'https://images.unsplash.com/photo-1563245372-f21724e3856d',
          rating: 4.6,
          time: 35,
          creator: 'Pasta Master'
        },
        {
          id: 3,
          title: '法式洋葱汤',
          description: '慢炖洋葱，浓郁汤底，配上烤至金黄的奶酪面包',
          image: 'https://images.unsplash.com/photo-1611704095936-8722dd25196a',
          rating: 4.7,
          time: 45,
          creator: 'French Cuisine'
        }
      ],
      likes: [
        {
          id: 4,
          title: '泰式青咖喱鸡',
          description: '香浓椰奶搭配辛辣青咖喱，口感层次丰富',
          image: 'https://images.unsplash.com/photo-1559523244-5508b638858f',
          rating: 4.9,
          time: 30,
          creator: 'Thai Chef'
        },
        {
          id: 5,
          title: '墨西哥牛肉塔可',
          description: '多汁牛肉馅搭配新鲜蔬菜和自制莎莎酱',
          image: 'https://images.unsplash.com/photo-1619740455993-9e912d191433',
          rating: 4.5,
          time: 20,
          creator: 'Mexican Food'
        }
      ]
    }
  },
  onLoad(options) {
    // 如果通过路由参数传入了type，自动切换到对应的标签页
    if (options.type === 'likes') {
      this.activeTab = 'likes'
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab
    },
    goBack() {
      uni.navigateBack()
    },
    viewRecipeDetail(id) {
      uni.navigateTo({
        url: `/pages/recipe-detail/recipe-detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss">
.recipe-collections {
  min-height: 100vh;
  background-color: #f8f8f8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 16px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .back-button {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    .placeholder {
      width: 40px;
    }
  }

  .tabs-container {
    display: flex;
    background-color: #fff;
    margin-bottom: 8px;

    .tab-item {
      flex: 1;
      height: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;

      .tab-text {
        font-size: 16px;
        color: #666;
        transition: color 0.3s ease;
      }

      .tab-indicator {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background-color: #4CAF50;
        border-radius: 3px;
        transition: all 0.3s ease;
        opacity: 0;
      }

      &.active {
        .tab-text {
          color: #4CAF50;
          font-weight: 600;
        }

        .tab-indicator {
          opacity: 1;
          width: 30px;
        }
      }
    }
  }

  .recipe-list {
    padding: 12px 16px;

    .recipe-card {
      background-color: #fff;
      border-radius: 12px;
      margin-bottom: 16px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      animation: fadeInUp 0.5s ease both;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
      }

      .recipe-image {
        position: relative;
        height: 180px;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          transition: transform 0.5s ease;
        }

        &:hover image {
          transform: scale(1.05);
        }

        .recipe-rating {
          position: absolute;
          top: 12px;
          right: 12px;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          padding: 4px 8px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 14px;
        }
      }

      .recipe-info {
        padding: 16px;

        .recipe-title {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin-bottom: 8px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .recipe-description {
          font-size: 14px;
          color: #666;
          margin-bottom: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 1.5;
        }

        .recipe-meta {
          display: flex;
          gap: 16px;

          .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: #666;
          }
        }
      }
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;

    .empty-text {
      font-size: 16px;
      color: #333;
      margin-top: 16px;
      margin-bottom: 8px;
    }

    .empty-subtext {
      font-size: 14px;
      color: #999;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>